import React, { useEffect } from 'react'
import { Text, TouchableOpacity, View, Image, ScrollView, TextInput } from 'react-native'
import { globalColor, MygoBack, pxPage, throttle } from '../../common/Common';
import { Header } from 'react-native-elements';
import { connect } from 'react-redux';
import searchResult from '../../redux/actions/Search_action';
import { useState } from 'react'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { addCollection } from '../../redux/actions/Collection_action';
import { getComment } from '../../redux/actions/Comment_action';
import { get_Episodes } from '../../redux/actions/Episodes_action'
import { Alert } from 'react-native';

const Tab = createMaterialTopTabNavigator();

function MyTabs(props) {
    useEffect(() => {
        props.dispatch(getComment(props.navigation.state.params.item.id));
        props.dispatch(searchResult(props.navigation.state.params.item.name?.split('第')[0], 1));
        props.dispatch(get_Episodes(props.navigation.state.params.item.id))
    }, [])


    return (<>
        <Header
            placement="left"
            backgroundColor='#fea6c4'
            leftComponent={
                <TouchableOpacity onPress={() => { props.navigation.goBack() }}>
                    <Image
                        source={require('../../common/icon/返回.png')}
                        style={{
                            height: pxPage(25),
                            width: pxPage(25),
                            marginLeft: pxPage(15),
                        }} />
                </TouchableOpacity>
            }
            centerComponent={{
                text: props.navigation.state.params.item.name,
                style: {
                    color: '#fff', fontSize: 16, fontWeight: 'bold'
                }
            }}
            rightComponent={
                <TouchableOpacity>
                    <Image style={{ height: pxPage(25), width: pxPage(25), }} source={require('../../common/icon/举报.png')} />
                </TouchableOpacity>
            }
        />

        <NavigationContainer>
            <Tab.Navigator
                initialRouteName="Feed"
                tabBarOptions={{
                    activeTintColor: '#f1687a',
                    inactiveTintColor: '#FEA6C4',
                    labelStyle: { fontSize: 15, fontWeight: 'bold' },
                    style: { backgroundColor: '#fff' },
                    indicatorStyle: { backgroundColor: '#f1687a' }

                }}>
                <Tab.Screen name="简介" component={Introduction} initialParams={{ props }} />
                <Tab.Screen name="评论" component={CommentScreen} initialParams={{ props }} />
                <Tab.Screen name="相关剧集" component={RelevantScreen} initialParams={{ props }} />
                <Tab.Screen name="猜你喜欢" component={GuessScreen} initialParams={{ props }} />
            </Tab.Navigator>
        </NavigationContainer>

        {/* 最底部的悬浮按钮 */}
        <View style={{
            height: pxPage(65), width: pxPage(414),
            position: 'absolute', bottom: 0,
            flexDirection: 'row',
            justifyContent: 'center',
        }}>
            {/* 收藏按钮 */}
            <View style={{ backgroundColor: '#fff', }}>
                <TouchableOpacity
                    onPress={throttle(() => {
                        if (props.login.login == false) {
                            Alert.alert(
                                "",
                                "您还没有登录呢，不能进行收藏哦~",
                                [
                                    {
                                        text: "取消",
                                        onPress: () => console.log("Cancel Pressed"),
                                        style: "cancel"
                                    },
                                    {
                                        text: "立即登录",
                                        onPress: () => {
                                            props.navigation.push('Login')
                                        }
                                    }
                                ]
                            );
                        } else {
                            let flag = 0;
                            props.collection.map((item, index) => {
                                if (item.id == props.navigation.state.params.item.id) {
                                    flag = 1;
                                    console.log('已经被收藏过了')
                                }
                            })
                            if (flag == 0) {
                                props.dispatch(addCollection(props.login.data.user_id, props.navigation.state.params.item.id, props.navigation.state.params.item))
                                Alert.alert('已加入收藏~')
                            } else if (flag == 1) {
                                Alert.alert('已经收藏过了，不能再点了哦~');
                            }
                        }

                    }, 200)}
                    style={{
                        fontWeight: 'bold',
                        width: pxPage(138),
                        paddingTop: pxPage(15),
                        flexDirection: 'row',
                        justifyContent: 'center'
                    }}>
                    <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(10) }} source={require('../../common/icon/收藏.png')} />
                    <Text style={{ color: '#FEA6C4', fontSize: 16 }}>收藏</Text>
                </TouchableOpacity>
            </View>

            {/* 立即播放按钮 */}
            <View style={{ backgroundColor: '#FEA6C4', }}>
                <TouchableOpacity style={{
                    fontWeight: 'bold',
                    width: pxPage(276),
                    paddingTop: pxPage(15),
                    flexDirection: 'row',
                    justifyContent: 'center'
                }}
                    onPress={throttle(() => {
                        console.log(props.Episodes);
                        props.navigation.navigate('Demo', {
                            item: props.navigation.state.params.item,
                            playlist:props.Episodes.data
                        })
                    }, 1000)}
                >
                    <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(10) }} source={require('../../common/icon/播放2.png')} />
                    <Text style={{ color: '#fff', fontSize: 16 }}>播放</Text>
                </TouchableOpacity>
            </View>
        </View>
    </>
    );
}

// 简介
const Introduction = ({ route }) => {
    const { props } = route.params
    return <View>
        <View>
            <View style={{
                height: pxPage(210),
                backgroundColor: 'rgba(0,0,0,0.3)',
                zIndex: 1
            }}>
                <View style={{
                    flexDirection: "row",
                    alignContent: 'center',
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: pxPage(10),
                }}>

                    {/* 文字简介部分 */}
                    <View style={{
                        width: pxPage(245),
                        marginLeft: pxPage(145),
                        marginTop: pxPage(25)
                    }}>
                        {/* 地区 */}
                        <Text style={{ color: '#fff', fontSize: 14, marginBottom: pxPage(3) }}>地区: {props.navigation.state.params.item.region}</Text>
                        {/* 年代 */}
                        <Text style={{ color: '#fff', fontSize: 14, marginBottom: pxPage(3) }}>年代: {props.navigation.state.params.item.years}</Text>
                        {/* 分类 */}
                        <Text style={{ color: '#fff', fontSize: 14, marginBottom: pxPage(3) }}>分类: {props.navigation.state.params.item.region} {props.navigation.state.params.item.lndexes} {props.navigation.state.params.item.label}</Text>
                        {/* 更新情况 */}
                        <Text style={{ color: '#fff', fontSize: 14, marginBottom: pxPage(3) }}>{props.navigation.state.params.item.synopsis.split('，')[0]}</Text>
                        {/* <Text style={{ color: '#fff', fontSize: 14, marginBottom: pxPage(3) }}>更新中{props.navigation.state.params.item.synopsis}</Text> */}

                        {/* 类型：想要做成点击类型进入全部此类型的页面里 */}
                        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: pxPage(5) }}>
                            {props.navigation.state.params.item.type.split(' ').map((item, index) => {
                                if (item != "") {
                                    return <TouchableOpacity style={{ borderWidth: 1, borderColor: '#fff', padding: pxPage(8), height: pxPage(30), borderRadius: 12, justifyContent: 'center', alignItems: 'center', marginRight: pxPage(8) }}>
                                        <Text style={{ color: '#fff', }}>{item}</Text>
                                    </TouchableOpacity>
                                }
                            })}
                        </View>
                    </View>
                </View>
            </View>

            {/* 上方底部的背景图 */}
            <Image
                resizeMode='cover'
                style={{
                    width: pxPage(414),
                    height: pxPage(210),
                    zIndex: 0,
                    position: 'absolute',
                    top: 0
                }}
                source={require('../../common/icon/详情页背景.jpg')}
            ></Image>

            {/* 动漫封面部分 */}
            <Image
                style={{
                    width: pxPage(130),
                    height: pxPage(180),
                    position: 'absolute',
                    top: pxPage(14),
                    zIndex: 99,
                    borderColor: '#fff',
                    borderWidth: 5,
                    left: pxPage(20),
                }}
                source={{ uri: props.navigation.state.params.item.img }}
            ></Image>
        </View>
        {/* 传入参数：data，排行榜的数据 */}
        {/* 下方全部信息 */}
        <ScrollView>
            {/* 简介 */}
            <View style={{ flexDirection: 'row', marginTop: pxPage(20), }}>
                <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(5) }} source={require('../../common/icon/花.png')}></Image>
                <Text style={{
                    color: '#F1687A',
                    fontSize: 16,
                    fontWeight: 'bold',
                    marginBottom: pxPage(10),

                }}>简介</Text>
            </View>
            {/* 简介内容 */}
            <Text style={{ fontSize: 14, color: '#888', lineHeight: pxPage(24), marginLeft: pxPage(5) }}>&emsp;&emsp;{props.navigation.state.params.item.introduction}</Text>

            {/* 连载情况 */}
            <View style={{ flexDirection: 'row', marginTop: pxPage(20) }}>
                <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(5) }} source={require('../../common/icon/花.png')}></Image>
                <Text style={{
                    color: '#F1687A',
                    fontSize: 16,
                    fontWeight: 'bold',
                    marginBottom: pxPage(10)
                }}>{props.navigation.state.params.item.synopsis}</Text>
            </View>
        </ScrollView>
    </View>
}

function getNowDate() {
    var myDate = new Date;
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var hours = myDate.getHours(); //获取当前小时
    var minutes = myDate.getMinutes(); //获取当前分钟
    var seconds = myDate.getSeconds(); //获取当前秒
    var now = year + "-" + mon + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
    return now;
}

// 评论
const CommentScreen = ({ route }) => {
    const { props } = route.params
    console.log(props)
    const [value, onChangeText] = useState('');
    return <View>
        <View style={{ backgroundColor: '#fff' }}>
            <View style={{
                height: pxPage(40),
                width: pxPage(280),
                marginLeft: pxPage(24),
                borderRadius: 15,
                backgroundColor: '#eee',
                borderColor: '#ccc',
                borderWidth: 1,
                marginTop: pxPage(5),
                marginBottom: pxPage(5)
            }}>
                <TextInput
                    placeholderTextColor="#999"
                    placeholder={'来发一条友善的评论吧'}
                    clearTextOnFocus={true}
                    onChangeText={text => onChangeText(text)}
                    value={value}
                    style={{ marginLeft: pxPage(10), height: pxPage(44), color: '#666' }}
                ></TextInput>
            </View>

            <TouchableOpacity
                onPress={throttle(() => {
                    console.log(value)
                    if (props.login.login == false) {
                        Alert.alert(
                            "",
                            "您还没有登录呢，不能进行评论哦~",
                            [
                                {
                                    text: "取消",
                                    onPress: () => console.log("Cancel Pressed"),
                                    style: "cancel"
                                },
                                {
                                    text: "立即登录",
                                    onPress: () => {
                                        props.navigation.push('Login')
                                    }
                                }
                            ]
                        );
                    } else {
                        if (value == '') {
                            Alert.alert('输入的评论不能为空哦~')
                        } else {
                            console.log(props.login.data.user_id)
                            console.log(props.navigation.state.params.item.id)
                            console.log(value)
                            console.log(getNowDate())

                            props.dispatch(addComment(props.login.data.user_id, props.navigation.state.params.item.id, value, getNowDate()))
                        }
                    }

                }, 2000)}
                style={{
                    width: pxPage(80),
                    height: pxPage(40),
                    position: 'absolute',
                    right: pxPage(10),
                    borderColor: '#FEA6C4',
                    borderWidth: 1,
                    backgroundColor: '#FEA6C4',
                    borderRadius: 15,
                    margin: pxPage(5),
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                <Text style={{ color: '#fff' }}>发送</Text>
            </TouchableOpacity>
        </View>

        <ScrollView>
            <View style={{ justifyContent: 'center', backgroundColor: '#fff', alignItems: 'center' }}>
                {props?.comment?.map((item, index) => {
                    return <View key={index} style={{
                        borderBottomWidth: 1,
                        borderBottomColor: '#ccc',
                        width: pxPage(390),
                        paddingTop: pxPage(15),
                        paddingBottom: pxPage(10)
                    }}>
                        {/* 评论人的头像 */}
                        <Image style={{
                            height: pxPage(50),
                            width: pxPage(50),
                            borderRadius: 50,
                            borderWidth: 2,
                            borderColor: '#FEA6C4'
                        }} source={{ uri: item.user_pic }}></Image>
                        {/* 评论人的姓名 */}
                        <Text style={{
                            position: 'absolute',
                            top: pxPage(20),
                            left: pxPage(65),
                            color: '#F1687A',
                            fontWeight: 'bold',
                            fontSize: 15
                        }}>{item.user_name}</Text>
                        {/* 评论的时间 */}
                        <Text style={{
                            position: 'absolute',
                            top: pxPage(45),
                            left: pxPage(65),
                            color: '#aaa',
                            fontSize: 13
                        }}>{item.comment_time}</Text>
                        {/* 评论的内容 */}
                        <Text style={{ color: '#888', paddingTop: pxPage(10), paddingBottom: pxPage(10) }}>
                            {item.comment_content}
                        </Text>
                    </View>
                })}

            </View>
            {/* 留白 */}
            <View style={{ height: pxPage(120) }}></View>
        </ScrollView>
    </View>
}

// 相关剧集
const RelevantScreen = ({ route }) => {
    const { props } = route.params

    return <View>
        {/* 相关剧集 */}
        <View style={{ flexDirection: 'row', marginTop: pxPage(20), }}>
            <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(5) }} source={require('../../common/icon/花.png')}></Image>
            <Text style={{
                color: '#F1687A',
                fontSize: 16,
                fontWeight: 'bold',
            }}>相关剧集</Text>
        </View>
        {/* 相关剧集的list */}
        <List data={props.searchResult.data} />
    </View>
}

// 猜你喜欢
const GuessScreen = ({ route }) => {
    const { props } = route.params
    return <View>
        <View style={{ flexDirection: 'row', marginTop: pxPage(10) }}>
            <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(5) }} source={require('../../common/icon/花.png')}></Image>
            <Text style={{
                color: '#F1687A',
                fontSize: 16,
                fontWeight: 'bold',
            }}>猜你喜欢</Text>
        </View>
        {/* 猜你喜欢的list */}
        <List data={props.recentData.Comment} />
    </View>
}

const mapStateToProps = state => {
    return {
        searchResult: state.searchResult,
        recentData: state.recentData,
        login: state.login,
        collection: state.collection,
        comment: state.comment,
        Episodes: state.Episodes
    }
}

export default connect(mapStateToProps)(MyTabs)

const List = ({ data }) => {

    return <View style={{ marginTop: pxPage(10), }}>
        <ScrollView horizontal={true}
            style={{
                flexDirection: "row",
            }}
        >
            {data.map((item, index) => {
                return <TouchableOpacity
                    key={index}
                    style={{
                        padding: pxPage(5),
                        marginBottom: pxPage(8)
                    }}>
                    <Image
                        source={{ uri: item.img }}
                        style={{
                            width: pxPage(110),
                            height: pxPage(161),
                            borderWidth: 1.5,
                            borderColor: '#F1687A',
                            shadowColor: '#999',
                        }}
                    />
                    <Text style={{
                        fontWeight: 'bold',
                        fontSize: 15,
                        marginTop: pxPage(10)
                    }}
                    >{item.name.length <= 6 ? item.name : item.name.slice(0, 6) + '...'}</Text>
                </TouchableOpacity>
            })}

        </ScrollView>
    </View>
}

const commentData = [
    {
        name: '玛卡巴卡',
        id: 1,
        img: require('../../common/icon/user.png'),
        time: '2021-5-31 14:15',
        text: '如果此前没有学过任何语言，0基础学习C语言，那么推荐使用Microsoft Visual Studio中文版（Visual C++中文版）。截至目前（2019/11/21），建议选用Visual Studio 2019社区版（安装时选择其中的Visual C++）。虽然VC本身稍复杂，但是对于代码的错误提示非常友好。初学者遇到的最大难题不是IDE不会用，而是很多编译错误提示搞不懂。若此前学过其它语言（尤其是Java），那么推荐使用Eclipse，在Eclipse的Market中安装CDT组件。如果希望找一个轻量级的安装包比较小的开发工具，并且【（英文过关（大致是4级水平）}或者（有一定的编程基础）】，那么选择Dev-C++',
    },
    {
        name: '小点点',
        id: 2,
        img: require('../../common/icon/user2.png'),
        time: '2021-5-31 14:15',
        text: 'Visual Studio是目前最为流行的Windows平台应用程序的商业集成开发环境。功能强大，界面友好。但是空间占用、资源占用都比较大，操作也复杂。最新版本为2019。'
    },
    {
        name: '依古比古',
        id: 3,
        img: require('../../common/icon/user3.png'),
        time: '2021-5-31 14:15',
        text: 'Code::Blocks 是开放源码的跨平台C/C++集成开发环境。 简单易用，免费，免安装，应该是最适合初学者使用的集成开发环境，强烈推荐。已经通过gcc8.1支持C++最新标准C++20。该软件附带了最新版的MinGW。'
    },
    {
        name: '汤姆布里波',
        id: 4,
        img: require('../../common/icon/user4.png'),
        time: '2021-5-31 14:15',
        text: '人生代代无穷已，江月年年望相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。 此时相望不相闻，愿逐月华流照君。 鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。 江水流春去欲尽，江潭落月复西斜。斜月沉沉藏海雾，碣石潇湘无限路。',
    }, {
        name: '乌塞迪赛',
        id: 5,
        img: require('../../common/icon/user5.png'),
        time: '2021-5-31 14:15',
        text: '人生代代无穷已，江月年年望相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。 此时相望不相闻，愿逐月华流照君。 鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。 江水流春去欲尽，江潭落月复西斜。斜月沉沉藏海雾，碣石潇湘无限路。',
    },
]
